<template>
  <section class="aboutUs">
    <div class="aboutUs-img">
      <img
        class="img"
        src="@/assets/images/aboutUs/image-242.jpg"
        lazy-load
        v-if="activeIndex === 0"
      />
      <img class="img" src="@/assets/images/aboutUs/Group-284.jpg" lazy-load v-else />
    </div>
    <ul class="aboutUs-tab">
      <li
        :class="{ active: activeIndex == index }"
        v-for="(item, index) in tab"
        :key="index"
        @click="switchActive(item,index)"
      >{{item.label}}</li>
    </ul>
    <section class="aboutUs-content">
      <component :is="activeName" keep-alive />
    </section>
  </section>
</template>

<script setup lang="ts">
import { ref, reactive, markRaw } from 'vue'
import contactUs from './components/contactUs.vue'
import introduce from './components/introduce.vue'
let activeIndex = ref(0)
let activeName = ref(markRaw(introduce))
const tab = reactive([
  {
    label: '企业介绍',
    key: markRaw(introduce),
  },
  {
    label: '联系我们',
    key: markRaw(contactUs),
  },
])
const switchActive = (item: any, index: number) => {
  activeIndex.value = index
  activeName.value = item.key
  const a = document.querySelector('.img')
  if (a != null) {
    const heightTop = a.clientHeight
    window.scrollTo({
      top: heightTop,
      behavior: 'smooth',
    })
  }
}
</script>

<style lang="scss" scoped>
.aboutUs {
  &-img {
    height: 456px;
  }
  &-tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90px;
    font-size: 32px;
    color: #686868;
    background-color: #daeeff;
    position: sticky;
    top: 110px;
    z-index: 9999;
    li {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
      &.active {
        color: #333333;
        border-bottom: 4px solid #2087e3;
      }
    }
  }
  &-content {
    margin-bottom: 160px;
  }
}
</style>